<template>
    <div style="overflow-y: scroll;height: 500px">
        <div class="batchOfInventory-box">
            <el-header class="title" style="position: relative;left:-15px;font-size: 30px">
                <i class="el-icon-document">基本资料</i>
            </el-header>

            <div class="message">
                <div :key="column.columnName" v-for="column in columns" class="grid-content bg-purple">
                    {{column.columnComment}}：<br>{{target[column.columnName]}}
                </div>
            </div>
        </div>

        <el-divider></el-divider>

        <div class="purchase-box">
            <el-header class="title" style="position: relative;left:-15px;font-size: 30px">
                <i class="el-icon-s-order">采购详情</i>
            </el-header>
            <el-table :data="purchases" border style="margin-top: 10px">
                <el-table-column label="药品名称" prop="medicinesName"></el-table-column>
                <el-table-column label="规格" prop="medicinesUnit"></el-table-column>
                <el-table-column label="数量" prop="purchaseNum"></el-table-column>
                <el-table-column label="单位" prop="purchaseUnit"></el-table-column>
                <el-table-column label="批发价" prop="purchaseTradePrice"></el-table-column>
                <el-table-column label="处方价" prop="purchasePrescriptionPrice"></el-table-column>
                <el-table-column label="批发额" prop="purchaseTradeTotalAmount"></el-table-column>
                <el-table-column label="处方额" prop="purchasePrescriptionTotalAmount"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {BatchesOfInventoryService} from "../../../model/gs/BatchesOfInventoryService";
    import {PurchaseService} from "../../../model/gs/PurchaseService";

    const batchesOfInventoryService = BatchesOfInventoryService.getInstance()
    const purchaseService = PurchaseService.getInstance()

    export default {
        data() {
            return {
                columns: [],
                target: {},
                purchases: []
            }
        },
        methods: {
            //初始化
            init(row) {
                batchesOfInventoryService.getColumnsAndValues(row.fid).then(({data}) => {
                    if(data.code === 0){
                        this.columns = data.columns
                        this.target = data.target

                        //通过id查询采购详情
                        purchaseService.getByBatchesOfInventory(this.target['batches_of_inventory_id']).then(({data}) => {
                            if(data.code === 0){
                                this.purchases = data.data
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .batchOfInventory-box, .purchase-box {
        width: 100%;
    }

    .message {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .bg-purple {
        border: 1px solid gainsboro;
        width: 32%;
        padding-top: 15px;
        height: 70px;
        padding-left: 10px;
    }
</style>
